import React, { useState } from "react"
import { RegistedUserApi } from "../../request/userInfo/RegistedUser"
import { useNavigate } from "react-router"


const RegistedForm:React.FC = ()=>{
    const navigate = useNavigate()

    // 表单信息
    const [Form,setForm] = useState({
        username:"",
        password:"",
        phone:""
    })
    const [againPassword,setAgainPassword] = useState("")


    const handleInputChange = (e:any)=>{
        const {name,value} = e.target
        const newForm = {...Form}
        if(name==="username"){
            newForm.username = value
        }else if(name === "password"){
            newForm.password = value
        }else if(name === "phone"){
            newForm.phone = value
        }else{
            setAgainPassword(value)
        }
        setForm(newForm)
    }

    // 提交表单
    const handleSubmit = async (e:any)=>{
        e.preventDefault()
        const username:string = Form.username
        const password:string = Form.password
        const phone:string = Form.phone
        // 1、验证账号密码长度
        if(username.length<3 || username.length>13){
            alert("账号长度必须在3~13位")
            return
        }
        if(password.length < 10 || password.length>18){
            alert("密码长度必须在10~18位")
        }
        // 2、验证两次密码输入是否一致
        if(password !== againPassword){
            alert("两次密码不一致")
            return
        }
        if(phone.length !== 11){
            alert("电话号码不合法")
            return
        }
        const dataJson = JSON.stringify(Form)
        const res = await RegistedUserApi(dataJson)
        if(res === 401){
            alert("用户名已存在")
        }else{
            alert("注册成功，请前往登录")
            navigate("/login")
        }

        
    }

    return(
        <main>
            <form className="text-center">
                <div>
                    <input type="text" 
                    value={Form.username}
                    name="username"
                    onChange={handleInputChange}
                    className="bg-neutral-200 my-3.5 w-60 h-9 pl-2 outline-sky-400 rounded-md"
                    placeholder="账号"
                    />
                </div>
                <div>
                    <input type="password"
                    value={Form.password}
                    name="password"
                    onChange={handleInputChange}
                    className="bg-neutral-200 my-3.5 w-60 h-9 pl-2 outline-sky-400 rounded-md"
                    placeholder="密码"
                    />
                </div>
                <div>
                    <input type="password"
                    name="againPassword"
                    onChange={handleInputChange}
                    className="bg-neutral-200 my-3.5 w-60 h-9 pl-2 outline-sky-400 rounded-md"
                    placeholder="再次输入密码"
                    />
                </div>
                <div>
                    <input type="text"
                    value={Form.phone}
                    name="phone"
                    onChange={handleInputChange}
                    className="bg-neutral-200 my-3.5 w-60 h-9 pl-2 outline-sky-400 rounded-md"
                    placeholder="电话号码"
                    />
                </div>
                <div>
                    <input type="submit" 
                    className="bg-sky-400 w-28 h-9 mt-3"
                    value="注册"
                    onClick={handleSubmit}
                    />
                </div>
            </form>
        </main>
    )
}

export default RegistedForm